<template>
    <div style="margin: 0 auto">
        <Form :model="registerUserInfo" :rules="ruleRegisterUserInfo" style="width: 80%">
            <FormItem prop="userId">
                <Input type="text" v-model="registerUserInfo.userId" placeholder="用户编号">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
                </Input>
            </FormItem>
            <FormItem prop="userName">
                <Input type="text" v-model="registerUserInfo.userName" placeholder="用户名称">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
                </Input>
            </FormItem>
            <FormItem prop="password">
                <Input type="password" v-model="registerUserInfo.password" placeholder="密码">
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
                </Input>
            </FormItem>
            <FormItem prop="passwordZ">
                <Input type="password" v-model="registerUserInfo.passwordZ" placeholder="再次确认密码">
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
                </Input>
            </FormItem>
        </Form>

    </div>
</template>

<script>
    export default {
        name: "RegisterUser",
        data() {
            const validatePasswordZ = (rule, value, callback) => {
                    if (this.registerUserInfo.password !== this.registerUserInfo.passwordZ) {
                        // 对第二个密码框单独验证
                        callback(new Error('两次密码不相同，请重新输入！'));
                    }
                    callback();

            };

            const validateUserId = (rule, value, callback) => {
               /* if (this.registerUserInfo.password !== "123456") {
                    // 对第二个密码框单独验证
                    callback(new Error('账号已注册！'));
                }*/
                callback();

            };

            return {
                registerUserInfo: {
                    userId: '',
                    userName: '',
                    password: '',
                    passwordZ:''
                },
                ruleRegisterUserInfo: {
                    userId: [
                        { required: true, message: '请填写用户编号', trigger: 'blur' },
                        { validator: validateUserId, trigger: 'blur' }
                    ],
                    userName: [
                        { required: true, message: '请填写用户名称', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度需大于6个字符', trigger: 'blur' }
                    ],
                    passwordZ: [
                        { required: true, message: '请再次输入密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度需大于6个字符', trigger: 'blur' },
                        { validator: validatePasswordZ, trigger: 'blur' }
                    ]
                },

            }
        },
        methods:{
            registerUser(){
                let self = this;
                this.$http({
                    headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
                    transformRequest: [data => self.$qs.stringify(data)],
                    method: 'post',
                    url: '/core/userInfo/registerUser',
                    data: {
                        userId: self.registerUserInfo.userId,
                        userName: self.registerUserInfo.userName,
                        password:self.registerUserInfo.password
                    }
                }).then(function (response) {
                    self.$Message.info({
                        content: response.data.message,
                        duration: 5
                    });
                }).catch(function (error) {

                    self.$Message.error({
                        content: error.response.data.message,
                        duration: 10
                    });
                });
            },

        }
    }
</script>

<style scoped>

</style>